<template>
        <div v-if="bookmarkes.length" class="bookmarks">
            <div v-for="bookmarks in bookmarkes" :key="bookmarks.label">
                <h2 class="label">{{ bookmarks.label }}</h2>
                <div v-if="bookmarks.books.length" class="features">
                    <div v-for="book in bookmarks.books" :key="book.title" class="feature">
                        <a :href="book.url" target="_blank">
                            <img :src="book.img" style="height:40px">
                            <div class="text">
                                <h2>{{ book.title }}</h2>
                                <p>{{ book.details }}</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'Bookmarks',
    data() {
        return{
            bookmarkes:[],
        }
    },
    setup() {
        const bookmarkes = require('../public/bookmarkes.json');
        return {
            bookmarkes,
        }
    }
})
</script>